<%- include('head') -%>

  <body>
    <ul>
      <button class="addStu">点击增加学生</button>
      <% for(var i=0; i < result.length; i++) { %>
        <li>
          <h3><span>姓名：</span>
            <%=result[i].name%>
          </h3>
        </li>
        <li><span>年龄：</span>
          <%=result[i].age%>岁
        </li>
        <li><span>爱好：</span>
          <%=result[i].hobby%>
        </li>
        <li><span>操作</span> <button class="delStu" data-id="<%= result[i]._id%>">点击删除</button><button class="updateStu" data-id="<%= result[i]._id%>">点击修改</button></li>
        <% } %>
    </ul>
    <script src="/static/jquery/jquery-3.2.1.min.js"></script>
    <script>
      //增加
      $('.addStu').click(function () {
        $.ajax({
          type: 'post',
          url: '/addStu',
          data: {
            name: '佐藤',
            age: 15,
            hobby: '枪水仙'
          },
          success: function (res) {
            console.log(res);
            history.go(0)
          }
        })
      })
      //删除
      $('.delStu').click(function () {
        if (confirm("确定删除吗？")) {
          $.ajax({
            type: 'get',
            url: '/delStu',
            data: {
              id: this.dataset.id
            },
            success: function (res) {
              console.log(res);
              history.go(0)
            }
          })
        }
      })
      //修改信息
      $('.updateStu').click(function(){
        $.ajax({
          type: 'post',
          url: '/update',
          data: {
            id: this.dataset.id,
            name: '马路牙子'
          }
        }).then(res=>{
          history.go(0)
        }).catch(err=>{

        })
      })
    </script>
  </body>

  </html>